<template>
  <div class="top">
    <div id="topLeft">抒 博客后台管理系统</div>
    <div id="topRight">
      <a-dropdown placement="bottomRight">
        <a class="ant-dropdown-link" @click.prevent>
          <UserOutlined />{{ adminName }}
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a @click="doLogout()">退出登录</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
  <div class="content">
    <homeLeft></homeLeft>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { UserOutlined } from "@ant-design/icons-vue";
import homeLeft from "./homeLeft";
import { dologout } from "../api/login";
import { useRouter } from "vue-router";
import io from "./units/socket.js";

export default defineComponent({
  setup() {
    const adminName = ref(sessionStorage.getItem("name"));
    const router = useRouter();

    const doLogout = () => {
      dologout({
        url: "/admin/dologout",
        success: (res) => {
          // console.log(res.data);
          sessionStorage.removeItem("Flag");
          sessionStorage.removeItem("name");
          io.emit("logout", { aid: res.data.aid });
          router.push({ path: "/" });
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    return {
      adminName,
      doLogout,
    };
  },

  components: {
    UserOutlined,
    homeLeft,
  },
});
</script>

<style socped>
.top {
  height: 54px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#topLeft {
  font-size: 30px;
  font-family: 华文行楷;
  margin-left: 20px;
}
#topRight {
  margin-right: 30px;
}
</style>